<template>
    <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane style="text-align:left">
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <calendar />
                    </el-icon>
                    <span>今日团课</span>
                </span>

            </template>
            <Step1></Step1>
        </el-tab-pane>
        <el-tab-pane style="text-align:left">
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <calendar />
                    </el-icon>
                    <span>今日私教</span>
                </span>
            </template>
            <Step2></Step2>
        </el-tab-pane>


    </el-tabs>
</template>
  
<script lang="ts" setup>
import { Calendar } from '@element-plus/icons-vue'
import Step1 from "./step1.vue"
import Step2 from "./step2.vue"
</script>
<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}
</style>
  